<script lang="ts" setup>
  import { useVbenModal } from '@vben/common-ui';
  import { Gtable } from "../../../component";
  import operation from './../../../component/batch/operation.vue';
  import { v4 as uuidv4 } from 'uuid';
  import { ref } from 'vue'
  import { getPageList} from '#/api';
  import type { BatchConfig,GTableConfig } from '../../../utils/declar'

  const tableConfig = ref<GTableConfig>({
    className: "com.gumo.entity.Dictionary",
    actionApiGet: false,
    isTree: true
  })

  const uuid = ref("");

  const [Modal, modalApi] = useVbenModal({
    draggable: true,
    footer:false,
    onOpenChange:onOpenChange,
  });

  const batchConfigData = ref<BatchConfig>({
    className: "com.gumo.entity.Dictionary", // 类名
    displayAddButton: true, // 显示“添加”按钮
    tableData: [],
    addToSubmit: {},
  });


  function onOpenChange(isOpen:boolean){
    if(!isOpen){
      uuid.value = uuidv4();
    }
  }

  async function cellClick({ row, column }) {
    if (column.field === "code") {
      batchConfigData.value.addToSubmit = { parentId : row.pid };
      const res = await getPageList({
        typeName: 'com.gumo.entity.Dictionary',
        pageIndex: 1,
        pageSize: 999,
        conditions: [
          {
            "attr": "parentId",
            "condition": "EQ",
            "value": row.id
          }
        ],
      });
      const data = extractAttrList(res);
      batchConfigData.value.tableData = data;
      modalApi.open();
    }
  }


  const extractAttrList = ({ records }) =>
    records.map(({ attrList }) =>
      attrList.reduce((obj, { attrName, value }) => {
        obj[attrName] = value;
        return obj;
      }, {})
    );

</script>

<template>
  <div>
    <Modal class="w-[70vw]" title="字典管理">
      <operation :data="batchConfigData"/>
    </Modal>
    <Gtable :config="tableConfig" :key="uuid" @cellClick="cellClick" />
  </div>
</template>


